<template>
  <div class="block-video" >
    <video-player v-if="material.meta && material.meta.coverPicKey"
      :path="block.path" :cover-pic-path="material.meta.coverPicKey"></video-player>
    <div v-if="block.status == 'temp' || status == 'uploading'" class="block-progress">
      视频上传中...{{percentTip}}%
    </div>
    <file-upload v-if="block.status == 'temp'" :path="block.path"
      :size="block.size"
      dir="materials/videos"
      content-type="video/*"
      type="video"
      :meta="meta"
      @progress="onProgress"
      @start="status = 'uploading'"
      @success="onUploadSuccess"
    ></file-upload>
  </div>
</template>

<script>
import FileUpload from './file-upload'
import VideoPlayer from './video-player'
import { mapGetters, mapActions } from 'vuex'

export default {
  props: {
    block: {
      type: Object,
      default () {
        return {
          path: '',
          size: 0,
          status: '',
          type: 'video',
        }
      }
    }
  },
  components: {
    FileUpload,
    VideoPlayer
  },
  computed: {
    ...mapGetters([
      'isModel'
    ]),
    status () {
      if (this.block.status === 'enable') {
        return 'upload-success'
      }
      return 'temp'
    },
    percentTip () {
      return parseInt(this.percent * 100)
    }
  },
  data () {
    return {
      percent: 0,
      fileVideoPath: '',
      thumbPath: '',
      material: {
        id: 0,
        type: 'video',
        size: 0,
        key: '',
        meta: {
          coverPicKey: this.block.meta.coverPicKey
        }
      }
    }
  },
  methods: {
    onProgress (info) {
      this.percent = info.percent
    },
    onUploadSuccess (material) {
      this.status = 'upload-success'
      this.material = material
      console.info(material)
      this.$emit('upload-success', material)
    }
  }
}
</script>

<style scoped lang="less">
@import '../assets/less/var.less';
</style>
